<!--督导结果分析-->
<template>
  <div class="wrapper-container" style="width:100%">
    <div
      class="search-container"
      style="justify-content: space-between !important;margin:0"
    >
      <div class="search-container" style="margin:0">
       <span style="color: #004ca7;margin-top: 5px;">学期：</span>
      <el-select
        v-model="xq"
        style="width: 140px"
        size="mini"
        placeholder="请选择"
      >
        <el-option
          v-for="item in xqList"
          :key="item.value"
          :label="item.xqmc"
          :value="item.xqmc"
        >
        </el-option>
      </el-select>
      &nbsp;&nbsp;
        <div class="search-container-item">
          <span style="color: #004ca7;">月份：</span>
          <el-select
            v-model="mounth"
            style="width: 140px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in mounthList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <div class="search-button" style="margin-left:10px;margin-top:3px;">
          <img src="../../../assets/assessment/icon-search.png" alt="" />
          <span @click="chax()">查询</span>
        </div>
      </div>
    </div>
    <div class="table-container">
      <el-table
        :data="tableData"
        style="width: 100%"
        class="xpaas-table-class"
        row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class"
        v-loading="ifTableLoading"
      >
        <el-table-column
          sortable
          prop="ny"
          label="年月"
          width="155"
          align="center"
        >
        </el-table-column>
        <el-table-column
          sortable
          prop="xi"
          label="系"
          width="156"
          align="center"
        >
        </el-table-column>

        <el-table-column label="按督导专家单位统计">
          <el-table-column
            prop="zxddks"
            label="专项督导课时"
            width="155"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="rctkks"
            label="日常听课课时"
            width="155"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="zks" label="总课时" width="155" align="center">
          </el-table-column>
        </el-table-column>

        <el-table-column label="按被听教员单位统计">
          <el-table-column prop="y" label="优" align="center">
          </el-table-column>
          <el-table-column prop="l" label="良" align="center">
          </el-table-column>
          <el-table-column prop="z" label="中" align="center">
          </el-table-column>
          <el-table-column prop="c" label="差" align="center">
          </el-table-column>
          <el-table-column
            prop="btzcs"
            label="被听总次数"
            width="155"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="ybl" label="优秀率" align="center">
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>

    <div class="bottom-block">
        <div class="export-button">
          <img src="../../../assets/assessment/icon-export.png" alt="" />
          <!-- <span>导出Excel</span> -->
          <download-excel
            class="export-btn"
            :data="tableData"
            :fields="jsonFields"
            type="xls"
            name="督导信息管理.xls"
            style="color: #f3b815"
          >
            &ensp;导出Excel
          </download-excel>
        </div>
      </div>
  </div>
</template>

<script>
import { fenxi, yueGroup } from "@/api/teacher/admin";
import SelectItem from "../../../components/SelectItem.vue";
import InputItem from "../../../components/InputItem.vue";
import ButtonItem from "../../../components/ButtonItem.vue";
import {
  reqGetXqList,
 
} from "../../../api/classHoursAddList/addList";
export default {
  components: {
    SelectItem,
    InputItem,
    ButtonItem
  },
  data() {
    return {
      xq: "",
      xqList: [],
      mounth: "1月",
      mounthList: [],
      teacherName: "",
      tableData: [],
      ifTableLoading: false,
      jsonFields: {
        年月: "ny",
        系: "xi",
        专项督导课时: "zxddks",
        日常听课课时: "rctkks",
        总课时: "zks",
        优: "y",
        良: "l",
        中: "z",
        差: "c",
        被听总次数: "btzcs",
        优秀率:"ybl",
      }
    };
  },
  created() {
    this.getXqList();
    // this.yueGroup();
    this.getlist();
    // this.initPageData();
  },
  methods: {
    // async initPageData() {
    //   // this.ifTableLoading = true;
    // },
    
    async getXqList(resultCall) {
      const result = await reqGetXqList();
      if (result.data.code == 200) {
        let xqList = result.data.data || [];
        this.xqList = xqList;
        if (xqList.length > 0) {
          this.xq = xqList[0].xqmc;
        }
      }
    },

    // async yueGroup() {
    //   let obj = {
    //     term: this.xq
    //   };
    //   return new Promise(resolve => {
    //     yueGroup(obj).then(res => {
    //       let resultList = res.data.data || [];
    //       if (!Array.isArray(resultList)) {
    //         resultList = [];
    //       }
    //       this.mounthList = resultList;
    //       console.log(this.mounthList)
    //       this.mounth = '';
    //       resolve();
    //     });
    //   });
    // },
    async getlist() {
      // this.tableData = [];
      let obj = {
        term: this.xq,
        month: this.mounth
      };
      this.ifTableLoading = true;
      return new Promise((resolve, reject) => {
        fenxi(obj).then(res => {
          if (res.data.code == 200) {
            this.ifTableLoading = false;
            let resultList = res.data.data || [];
            if (!Array.isArray(resultList)) {
              resultList = [];
            }
            this.tableData = resultList;
            resolve();
          }
        });
      });
    },
    chax() {
      this.getlist();
    }
  },
  mounted() {
    var _this = this;
    var tempArry = Array.from(new Array(12).keys());
    tempArry.forEach(function(e) {
      _this.mounthList.push({
        value: e + 1,
        label: e + 1 + "月"
      });
    });
  }
};
</script>
<style lang="less" scoped>

@fontFamily:"Microsoft YaHei";
.xpaas-table-class {
  border: 1px solid #004ca7;
  border-radius: 9px;
  > ::v-deep div.el-table__header-wrapper {
    > table.el-table__header {
      > thead {
        > tr.xpaas-header-row-class {
          padding: 0;
          height: 76px;
          background-color: #edf2f9;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          > th.xpaas-header-cell-class {
            font-weight: bold;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
  > ::v-deep div.el-table__body-wrapper {
    > table.el-table__body {
      > tbody {
        > tr.xpaas-row-class {
          > td.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
          > td.xpaas-cell-class {
            height: 76px;

            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            > div.cell {
              font-weight: normal;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
}
.bottom-block {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .export-button {
    width: 127px;
    height: 27px;
    background: #fff6ef;
    border: 1px solid #f3b815;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    > img {
      width: 17px;
      height: 17px;
    }
    > span {
      margin-left: 12px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f3b815;
    }
  }
  .text {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 39px;
    color: #004ca7;
  }
}
.search-container {
  justify-content: flex-start !important;
}

.search-button {
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 27px;
  background: #f1f8fe;
  border: 1px solid #51aef6;
  border-radius: 6px;

  > span {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #51aef6;
  }

  > img {
    width: 19px;
    height: 19px;
    margin-right: 4px;
  }
}

.table-container {
  margin-top: 15px;

  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    // border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .wrapper-button {
    display: flex;
    flex-direction: column;
    align-items: center;

    > div {
      margin-bottom: 8px;
    }
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/special.less";
.table-container::v-deep .el-table__header th {
  border-color: #c7d7eb !important;
  padding-left: 10px;
}
.filter-button {
  margin-top: 27px;
}
.filter-button::v-deep .el-radio-button .el-radio-button__inner {
  border-radius: 6px !important;
  border: 1px solid rgb(251, 30, 21);
  color: rgb(251, 30, 21);
  background-color: rgb(254, 234, 235);
}
.filter-button::v-deep
  .el-radio-button__orig-radio:checked
  + .el-radio-button__inner {
  border: 1px solid rgb(251, 30, 21);
  color: white;
  background-color: rgb(251, 30, 21);
}
.wrapper-container {
  width: 1711px;
  margin: 0 auto;
}
.table-container {
  margin-top: 15px;

  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}

.save-button {
  width: 87px;
  height: 36px;
  line-height: 36px;
  background: #fff6ef;
  border: 1px solid #f3b815;
  border-radius: 6px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #f3b815;
  text-align: center;
  margin: 82px auto;
}

.zuoyou {
  width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
